<!--  include necessary libs  -->
<link rel="stylesheet" type="text/css" href="/css/slide.css" />
<script type="text/javascript" src="/js/jquery/jquery.tools.min.js"></script>

<script type="text/javascript">
/* inicializing scrolable slide*/
	$(function() {
		// initialize scrollable
		$(".scrollable").scrollable({
			circular : true,
			mousewheel : false
		}).navigator().autoscroll({
			interval : 15000
		});

	});
</script>
<!-- #########  This is module body ######### -->
<div id="ScrolBody">
	<!-- "previous page" action -->
	<a class="prev browse left"></a>
	<!-- root element for scrollable -->
	<div class="scrollable">

		<!-- root element for the items -->
		<div class="items">

			<!-- Slide 1 -->
			<div>
				<div class="scrolItem">
					<div class="wrapper">
						<div class="left_column" align="center">
							<img src="/image/slide/photo1.png" width="527px" height=296px>							
						</div>
						<div class="right_column">
							<div class="ScrolText">
								<div class="ScrolTextTitle">SPEED</div>
								<div class="ScrolTextBody">
									Performance always matters. 
									While revealing underlying 
									robustness, it's an advantage 
									in it's own right.
								</div>
							</div>
						</div>						
					</div>
				</div>

			</div>

			<!-- Slide 2 -->
			<div>
				<div class="scrolItem">
					<div class="wrapper">
						<div class="left_column" align="center">
							<img src="/image/slide/photo2.png" width="527px" height=296px>							
						</div>
						<div class="right_column">
							<div class="ScrolText">
								<div class="ScrolTextTitle">BEAUTY</div>
								<div class="ScrolTextBody">
									Solutions that are not only ergonomic, but pleasing to the eye.
								</div>
							</div>
						</div>						
					</div>
				</div>

			</div>

			<!-- Slide 3 -->
			<div>
				<div class="scrolItem">
					<div class="wrapper">
						<div class="left_column" align="center">
							<img src="/image/slide/photo3.png" width="527px" height=296px>							
						</div>
						<div class="right_column">
							<div class="ScrolText">
								<div class="ScrolTextTitle">POTENTIAL</div>
								<div class="ScrolTextBody">
									We produce tools that greatly enhance your capabilities.
								</div>
							</div>
						</div>						
					</div>
				</div>

			</div>
			
			<!-- Slide 4 -->
			<div>
				<div class="scrolItem">
					<div class="wrapper">
						<div class="left_column" align="center">
							<img src="/image/slide/photo4.png" width="527px" height=296px>							
						</div>
						<div class="right_column">
							<div class="ScrolText">
								<div class="ScrolTextTitle">QUALITY</div>
								<div class="ScrolTextBody">
									The software should be like 
									well-oiled machinery, a 
									stable-working
									mechanism that you can rely on.
								</div>
							</div>
						</div>						
					</div>
				</div>

			</div>
			
			<!-- Slide 5 -->
			<div>
				<div class="scrolItem">
					<div class="wrapper">
						<div class="left_column" align="center">
							<img src="/image/slide/photo5a.png" width="527px" height=296px>							
						</div>
						<div class="right_column">
							<div class="ScrolText">
								<div class="ScrolTextTitle">FREEDOM</div>
								<div class="ScrolTextBody">
									The software that enables you to freely do things you've always dreamed of.
								</div>
							</div>
						</div>						
					</div>
				</div>

			</div>

		</div>

	</div>

	<!-- "next page" action -->
	<a class="next browse right"></a>

	<div class="navi">
		<a href="0" class="active" /> 
		<a href="1" class="" /> 
		<a href="2"	class="" />
		<a href="3"	class="" />
		<a href="4"	class="" />
	</div>
</div>